<template>
  <div class="title">
    <h1>
      {{ msg }}
    </h1>
  </div>
  <div class="container">
    <div class="hello">
      <h2 style="display: block">Button按钮</h2>
      <h4>
        说明：使用
        type、plain、round、size和disabled属性来定义按钮样式，各个属性都可以排列组合使用。
      </h4>
      <div class="display">
        <es-button type="default"> 默认按钮 </es-button>
        <es-button type="success"> 成功按钮 </es-button>
        <es-button type="warning"> 警告按钮 </es-button>
        <es-button type="error"> 错误按钮 </es-button>
      </div>
      <div class="display">
        <es-button type="default" plain> 默认按钮 </es-button>
        <es-button type="success" plain> 成功按钮 </es-button>
        <es-button type="warning" plain> 警告按钮 </es-button>
        <es-button type="error" plain> 错误按钮 </es-button>
      </div>
      <div class="display">
        <es-button type="default" round> 默认按钮 </es-button>
        <es-button type="success" round> 成功按钮 </es-button>
        <es-button type="warning" round> 警告按钮 </es-button>
        <es-button type="error" round> 错误按钮 </es-button>
      </div>
      <div class="display">
        <es-button type="default" plain round> 默认按钮 </es-button>
        <es-button type="success" plain round> 成功按钮 </es-button>
        <es-button type="warning" plain round> 警告按钮 </es-button>
        <es-button type="error" plain round> 错误按钮 </es-button>
      </div>
      <div class="display">
        <es-button type="default" disabled> 默认按钮 </es-button>
        <es-button type="success" disabled> 成功按钮 </es-button>
        <es-button type="warning" disabled> 警告按钮 </es-button>
        <es-button type="error" disabled> 错误按钮 </es-button>
      </div>
      <div class="display">
        <es-button size="large" plain> large按钮 </es-button>
        <es-button size="default" round> default按钮 </es-button>
        <es-button size="small" plain round> small按钮 </es-button>
        <es-button size="mini" disabled>mini按钮 </es-button>
      </div>
    </div>
    <div class="hello">
      <h2 style="display: block">Input输入框</h2>
      <h4>
        说明：
      </h4>
      <div class="display">
        <es-input v-model="input1" placeholder="请输入"></es-input>
        <es-input v-model="input2" placeholder="请输入" disabled></es-input>
        <es-input v-model="input3" placeholder="请输入" type="password"></es-input>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const msg = ref("Hello, EASE-UI");
const input1 = ref('input')
const input2 = ref('input')
const input3 = ref('input')
</script>

<style lang="scss" scoped>
body {
  background-color: beige;
}
.title {
    height: 10vh;
    width: 100%;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
.container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  height: 90vh;
  .hello {
    height: auto;
    width: 50%;
  }

  .display {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 60px;
    gap: 20px;
  }
}
</style>
